<!DOCTYPE html>
<html>
<head>
    <meta content="text/html; charset=UTF-8" http-equiv="content-type">
    <title>Audio</title>
</head>
<body>
  <video id="movies"  autoplay="autoplay" style="display: none;"  autobuffer="true" width="400px" height="300px">
    <source src="Intermission-Walk-in.ogv" type='video/ogg; codecs="theora, vorbis"'>
    <source src="Intermission-Walk-in_512kb.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
  </video>
  <a href="#" onclick="video.play();">play</a><a href="#" onclick="video.pause();">pause</a>
  <canvas id="timeline" width="400px" height="300px"></canvas>
<script type="text/javascript">

     var updateInterval = 10;


   setInterval(updateFrame, updateInterval);
 var video = document.getElementById("movies");

    video.onclick=function(){
       setTimeout(function(){
           if(video.paused){
           alert('a')
       }
       },10)
    }
    function updateFrame() {

        var timeline = document.getElementById("timeline");
         
        var ctx = timeline.getContext("2d");

        ctx.drawImage(video, 0, 0, 400, 300, 0, 0, 150, 150);
        ctx.drawImage(video, 0, 0, 400, 300, 150, 0, 150, 150);
        ctx.drawImage(video, 0, 0, 400, 300, 0, 150, 150, 150);
        ctx.drawImage(video, 0, 0, 400, 300, 150, 150, 150, 150);
    }




  </script>


</body>
</html>